<template>
  <div class="home">
    <home-header />
    <home-swiper :swiperList="swiperList"/>
    <home-classic :classicList="classicList"/>
    <home-location />
    <home-hot :hotList="hotList"/>
    <home-like :likeList="likeList"/>
    <footer-nav />
  </div>
</template>

<script>
import HomeHeader from './pages/Header'
import HomeSwiper from './pages/Swiper'
import HomeClassic from './pages/Classic'
import HomeLocation from './pages/Location'
import HomeHot from './pages/Hot'
import HomeLike from './pages/Like'
import FooterNav from './pages/FooterNav'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      swiperList: [],
      classicList: [],
      hotList: [],
      likeList: [],
      changCity: ''
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeClassic,
    HomeLocation,
    HomeHot,
    HomeLike,
    FooterNav
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getHttp () {
      this.$http.get('http://www.hspstudio.club/gethomedata').then(res => {
        // console.log(res.data)
        let data = res.data.cities
        data.map(item => {
          if (item.cityName === this.city) {
            this.swiperList = item.swiperList
            this.classicList = item.classicList
            this.hotList = item.hotList
            this.likeList = item.likeList
          }
        })
      })
    }
  },
  created () {
    this.changeCity = this.city
    this.getHttp()
  },
  activated () {
    // console.log(this.changeCity,this.city)
    if (this.changeCity !== this.city) {
      this.getHttp()
      this.changeCity = this.city
    }
  }
}
</script>

<style lang="stylus">/*scope:表示以下的样式为局部样式，避免样式覆盖*/
  .home
    color: #212121
    background-color: #f5f5f5
</style>
